<template>
  <!-- title="凌动智能采购系统" :showHome=false 通过组件传参 传给公共组件 -->
  <main-layout title="凌动智能采购系统" :showHome="false">
  <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
  <van-swipe-item class="chart-list" ><div ref="lineChartNode" class="chart-box"></div></van-swipe-item>
  <van-swipe-item class="chart-list" ><div ref="peiChartNode" class="chart-box"></div></van-swipe-item>

</van-swipe>
    <div class="fun-box" v-for="item in funList" :key="item.name">
      <span class="title">{{ item.name }}</span>
      <div class="box">
        <div class="item" v-for="it in item.children" :key="it.name">
          <i @click="toPage(it)" :class="['icon', it.icon]"></i>
          <span class="text">{{ it.name }}</span>
        </div>
      </div>
    </div>
  </main-layout>
</template>
<script>
import echarts from "echarts";
import { collApi, paymentApi } from "../../apis/homeApi";
import LineChart from "../home/LineChart";
import cricleChart from "../home/cricleChart";
export default {
  mixins: [LineChart, cricleChart],
  data() {
    return {
      funList: [
        {
          name: "王一博",
          children: [
            { id: "", icon: "a", name: "100块", right: "R", path: "" },
            { id: "", icon: "b", name: "120块", right: "C", path: "" },
            { id: "", icon: "c", name: "130块", right: "R", path: "" },
            { id: "", icon: "d", name: "140块", right: "C", path: "" },
          ],
        },
        {
          name: "王嘉尔项目管理",
          children: [
            {
              id: "PROJECT-01-01",
              icon: "e",
              name: "150块",
              right:"C",
              path: "/project/list",
            },
            {
              id: "PROJECT-01-02",
              icon: "f",
              name: "160块",
              right: "C",
              path: "/project/edit",
            },
          ],
        },
        {
          name: "张艺兴采购",
          children: [
            {
              id: "PURCHASE-01-01",
              icon: "h",
              name: "170块",
              right: "R",
              path: "/pucharts/list",
            },
            {
              id: "PURCHASE-01-02",
              icon: "i",
              name: "180块",
              right: "C",
              path: "/pucharts/edit",
            },
          ],
        },
        {
          name: "罗云熙",
          children: [
            { id: "", icon: "j", name: "190块", right: "U", path: "" },
            { id: "", icon: "k", name: "200块", right: "C", path: "" },
          ],
        },
        {
          name: "易烊千玺",
          children: [{ id: "", icon: "g", name: "210块", path: "/setting" }],
        },
      ],
    };
  },
  // 使用计算属性从vuex中拿到值
  computed: {
    myRight() {
      return this.$store.getters["common/userRight"];
    },
  },
  mounted() {   //只要不调用dom节点，就不用用mounted  ，一般用create里面直接调用
    // 在vue中，我们可以通过另一种方式获取dom，vue有一个$refs的对象，只要将组件注册ref。
    // 第一个echarts接口(init方法) 用于初始化实例  init(dom节点)
    this.lineChart = echarts.init(this.$refs.lineChartNode);
    // 获取数据成功后，执行数据可视化渲染
     this.getLineData()
    this.peiChart = echarts.init(this.$refs.peiChartNode);
    this.getPeiData()
  },
  methods: {
    // 点击图标，跳转到具体页面
    toPage(route) {
      // debugger;
      console.log("参数是那些个", route.path);
      // route参数是否有完整路由，没有则表示项目还没有开发(就是path 没有路径为空)，提示用户
      if (!route.path) {
        this.$toast.fail("功能建设中，敬请期待");
        return;
      }
      // 判断是否需要进行权限管控，如果不需要据直接跳转页面  没有right的就是不需要进行权限的，可以直接跳转
      if (!route.right) {
        this.$router.push(route.path);
        return;
      }
      // 需要对用户权限进行判断
      let myRight = this.myRight.find((it) => it.id === route.id);
      console.log("权限有哪些:", this.myRight, route.id, myRight);
      if (myRight && myRight.role.includes(route.right)) {
        this.$router.push(route.path);
      } else {
        this.$toast.fail("您不具备访问次功能的权限，请联系管理员");
      }
    },
    // 获取折线图数据
    async getLineData() {
      let result = await collApi();
      console.log("折线数据", result);
      if(result.code===200) this.renderLineChart(result.data)
    },
    //获取圆环数据
    async getPeiData() {
      let result = await paymentApi();
      console.log("圆环数ju ", result.data);
      if(result.code===200) this.renderPeiChart(result.data)
    },
  },
    beforeDestroy() {
    if (this.timer) clearTimeout(this.timer);
  },
};
</script>
<style lang="less" scoped>
@import "./index.less";
</style>